<template>
	<view>
		<view class="form-view">
			
			<view class="form-row">
				<view class="label">医院名称</view>
				<input placeholder="医院名称" v-model="form.hospitalAme" placeholder-class="placeholder-class" />
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">缩略图</view>
				<uni-icons v-if="!form.fileName"  @click="onPictureNameClick" class="avatar" type="person" size="30"></uni-icons>
				<image v-else class="avatar" @click="onPictureNameClick" :src="form.fileName"></image>
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">负责人</view>
				<input placeholder="负责人" v-model="form.headPeo" placeholder-class="placeholder-class" />
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">负责人电话</view>
				<input type="number" maxlength="11" v-model="form.headTel" placeholder="负责人电话"
					placeholder-class="placeholder-class" />
			</view>
			<view class="div-line-type-1" />

			<view class="form-row">
				<view class="label">医院等级</view>
				<view class="value">
					<picker :range="hospitalGradeList" :value="index" @change="pickerChange">
						<view class="hospital-input-view">
							<view class="hospital-input">{{form.hospitalGrade}}</view>
							<!-- <input placeholder="未选择" v-model="form.hospitalName" placeholder-class="placeholder-class" /> -->
							<uni-icons type="right" color="#BABDC4" />
						</view>
					</picker>
				</view>
			</view>
			<view class="div-line-type-1" />
			
			<view
				class="form-row" 
				style="height:auto;
				 box-sizing: border-box;
				 align-items: flex-start;
				 padding-top: 10rpx;
				 padding-bottom: 10rpx;">
				<view class="label">详细地址</view>
				<textarea
					style="height: 80px;"
					placeholder="详细地址" 
					placeholder-class="placeholder-class" 
					v-model="form.detailAddress"/>
			</view>
			<view class="div-line-type-1" />
			
			
			<view 
				class="form-row" 
				style="height:auto;
				 box-sizing: border-box;
				 align-items: flex-start;
				 padding-top: 10rpx;
				 padding-bottom: 10rpx;">
				<view class="label">简介</view>
				<textarea
					style="height: 180rpx;"
					placeholder="请输入简介" 
					placeholder-class="placeholder-class" 
					v-model="form.profile"/>
			</view>
			<view class="div-line-type-1"/>
			<view style="height: 130rpx;"></view>



		</view>

		<view class="bottom-fixed-view">
			<view class="submit-btn" @click="save">保存</view>
		</view>

	</view>
</template>

<script>
	import * as upload from '../../common/upload.js'
	import * as hospitalInfo from '../../common/api/hospitalInfo.js'
	export default {
		data() {
			return {
				form: {
					hospitalAme:'',
					hospitalGrade:'',
					headTel:'',
					headPeo:'',
					fileName:'',
					profile:'',
					detailAddress:'',
					amountName:'',
				},
				index: 0,
				hospitalUid:'',
				isInited:false,
				hospitalGradeList: [
					'一级甲等',
					'一级乙等',
					'一级丙等',
					'二级甲等',
					'二级乙等',
					'二级丙等',
					'三级甲等',
					'三级乙等',
					'三级丙等',
				]
			}
		},
		onLoad(opt) {
			this.initInfo()
		},
		methods: {
			pickerChange(e) {
				this.index = e.target.value
				this.form.hospitalGrade = this.hospitalGradeList[e.target.value]
			},
			onPictureNameClick(){
				const self = this
				upload.uploadImage().then(result => {
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					console.log('===>', result);
					self.form.pictureName = result.data.url
				})
			},
			checkForm(){
				const showMsg = (msg = '') => {
					if(msg){
						uni.showToast({
							title:msg,
							icon:'none'
						})
					}
				}
				if(!this.form.hospitalAme){
					showMsg('医院名称不能为空')
					return false
				}
				if(!this.form.fileName){
					showMsg('缩略图不能为空')
					return false
				}
				if(!this.form.headPeo){
					showMsg('负责人不能为空')
					return false
				}
				if(!this.form.headTel){
					showMsg('负责人电话不能为空')
					return false
				}
				if(!this.form.hospitalGrade){
					showMsg('医院等级不能为空')
					return false
				}
				if(!this.form.detailAddress){
					showMsg('详细地址不能为空')
					return false
				}
				if(!this.form.profile){
					showMsg('简介不能为空')
					return false
				}
				return true
			},
			save() {
				console.log('-->',JSON.stringify(this.form));
				if(!this.checkForm()){
					return
				}
				const param = Object.assign({}, this.form,{
					updateTime:undefined,
					createTime:undefined,
				})
				hospitalInfo.update(param).then(result => {
					uni.showToast({
						title: '保存成功',
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}).catch(error => {
					console.log(error);
				})
			},
			initInfo(){
				const dataJson = uni.getStorageSync('user_info') || '{}'
				const data = JSON.parse(dataJson) || {}
				this.hospitalUid = data.hospitalUid
				this.getInfo()
			},
			getInfo(){
				const param = {
					uid:this.hospitalUid
				}
				hospitalInfo.queryById(param).then(result => {
					this.form = result.data.data
				}).catch(error => {
					console.log(error);
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.form-view {
		width: 100%;
		display: flex;
		flex-direction: column;

		.form-row {
			display: flex;
			background: white;
			padding: 0 30rpx;
			height: 120rpx;
			align-items: center;
			justify-content: space-between;

			.label {
				color: #232323;
				font-size: 32rpx;
				font-weight: bold;
				word-break: keep-all;
				min-width: 150rpx;
			}
			.value{
				display: flex;
				align-items: center;
			}

			input {
				text-align: end;
			}

			.placeholder-class {
				color: rgba(35, 35, 35, 0.4);
				font-size: 32rpx;
			}

			.uni-icons {
				margin-left: 16rpx;
			}
			
			.hospital-input-view{
				display: flex;
				align-items: center;
				.hospital-input{
					
				}
			}
			
			.avatar{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: solid 1rpx #F8F8F8;
			}
			


		}

		.div-line-type-1 {
			width: calc(100% - 30rpx);
			background: #F8F8F8;
			height: 2rpx;
			margin-left: 30rpx;
		}

	}

	.upload-id-card-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.card-view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;
		}

		.card-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.card-img {
				width: 330rpx;
				height: 200rpx;
			}

			.tip-text {
				color: rgba(35, 35, 35, 0.8);
				font-size: 24rpx;
				margin-top: 28rpx;
			}
		}
	}

	.switch-tab-view {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 120rpx;

		.title-view {
			display: flex;
			align-items: center;
		}

		.label {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
		}

		.label-tip {
			color: rgba(35, 35, 35, 0.5);
			font-size: 26rpx;
		}

		.tab-view {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.tab-item {
				background: #F6F6F6;
				padding: 0 20rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				color: rgba(35, 35, 35, 0.8);
				font-size: 26rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}

			.tab-item-selected {
				background: #2EB0D9;
				color: white;
			}
		}
	}


	.bottom-fixed-view {
		width: 100%;
		height: 108rpx;
		position: fixed;
		background: white;
		padding: 14rpx 30rpx;
		box-sizing: border-box;
		bottom: 0;

		.submit-btn {
			width: 100%;
			height: 80rpx;
			background: #2EB0D9;
			border-radius: 40rpx;
			color: white;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.region-selected{
		::v-deep .input-value-border{
			border: none;
		}
		::v-deep .input-arrow{
			display: none;
			width: 0;
			height: 0;
		}
		::v-deep .input-value{
			display: inline;
			height: auto;
		}
	}

</style>
